<h2 class="api-title" id="API">
  API
</h2>
<div class="apis">
  <ng-container *ngFor="let api of apis">
    <section *ngIf="api.apis && api.apis.length">
      <ng-container *ngIf="api.type === 'component' || api.type === 'directive'">
        <ng-container *ngTemplateOutlet="componentTemplate; context: {$implicit: api}"></ng-container>
      </ng-container>
      <ng-container *ngIf="api.type === 'service'">
        <ng-container *ngTemplateOutlet="serviceTemplate; context: {$implicit: api}"></ng-container>
      </ng-container>
    </section>
  </ng-container>
</div>

<ng-template #componentTemplate let-api>
  <h3 class="fui-toc-item api-name" [id]="getViewId(api.selector)" [attr.fui-toc-name]="api.selector">
    <span>{{ api.selector }}</span>

    <fui-type-label [type]="api.type"></fui-type-label>
  </h3>
  <fui-table [fuiTableFlex]="[2, 1, 3]" fuiTableOutline>
    <fui-table-head>
      <div>Property</div>
      <div>Default</div>
      <div>Description</div>
    </fui-table-head>
    <fui-table-row  fui-docs-api *ngFor="let api of api.apis">
      <div class="api-content">
        <span>
          <span>@{{ api.decoratorType }}</span>
          <span>{{ api.optional ? "?" : "" }}</span>
          <span>()</span>
        </span>
        <br />
        <span>{{ api.id }}: <span class="api-variable">{{ api.type }}</span></span>
      </div>
      <div class="api-default api-variable">
        {{ api.default | fuiDefault }}
      </div>
      <div>{{ api.comment }}</div>
    </fui-table-row>
  </fui-table>
</ng-template>

<ng-template #serviceTemplate let-api>
  <h3 class="fui-toc-item api-name" [id]="getViewId(api.className)" [attr.fui-toc-name]="api.className">
    <span>{{ api.className }}</span>
    <fui-type-label [type]="api.type"></fui-type-label>
  </h3>
  <ng-container *ngIf="getPropertyApis(api.apis).length > 0">
    <h5>Properties</h5>
    <fui-table [fuiTableFlex]="[2, 1, 3]" fuiTableOutline>
      <fui-table-head>
        <div>Property</div>
        <div>Default</div>
        <div>Description</div>
      </fui-table-head>
      <fui-table-row  fui-docs-api *ngFor="let api of getPropertyApis(api.apis)">
        <div class="api-content">
          <span><span class="api-modifier">{{ api.accessor }}</span> {{ api.id }}: <span class="api-variable">{{ api.type }}</span></span>
        </div>
        <div class="api-default api-variable">
          {{ api.default | fuiDefault }}
        </div>
        <div>{{ api.comment }}</div>
      </fui-table-row>
    </fui-table>
  </ng-container>

  <ng-container *ngIf="getMethodApis(api.apis).length > 0">
    <h5>Methods</h5>
    <fui-table [fuiTableFlex]="[2, 1, 3]" fuiTableOutline>
      <fui-table-head>
        <div>Method</div>
        <div>Return</div>
        <div>Description</div>
      </fui-table-head>
      <fui-table-row fui-docs-api *ngFor="let api of getMethodApis(api.apis)">
        <div class="api-content">
          <span>{{ api.id }}(<span class="api-variable">{{ api.params?.join(', ') }}</span>)</span>
        </div>
        <div class="api-return api-variable">
          {{ api.returnType | fuiDefault }}
        </div>
        <div>{{ api.comment }}</div>
      </fui-table-row>
    </fui-table>
  </ng-container>
</ng-template>
